<template>
  <div class="index-page">
    <div class="page-center page-navs">
      <div class="page-center-content home-page-content" >
          <a href="/home"><img  src="../assets/img/register/logo.png" class="navs-logo" alt></a>
        <div>
          <el-button class="login-button" @click="doLogin(1)">登录</el-button>
          <el-button class="register-button" @click="doLogin(2)">注册</el-button>
        </div>
      </div>
    </div>
    <div style="background:#f2f2f2;">
      <router-view></router-view>
    </div>

    <!-- <div class="invite-index page-content">
      <el-carousel class="index-top-banner" height="550px">
        <el-carousel-item class="index-top-banner" v-for="(t,i) in banners" :key="i">
          <img :src="t.image" alt="" class="index-top-banner">
        </el-carousel-item>
      </el-carousel>

      <div class="invite-serve invite-page">
        <div class="invite-page-center">
          <div class="invite-title">我们的服务</div>
          <div class="invite-title-line"></div>
          <div class="invite-serve-content">
            <el-col :span="8">
              <div class="serve-all">
                <div class="serve-circle serve-safety"></div>
                <div class="serve-text">更安全</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="serve-all">
                <div class="serve-circle serve-major"></div>
                <div class="serve-text">更专业</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="serve-all">
                <div class="serve-circle serve-convenient"></div>
                <div class="serve-text">更便捷</div>
              </div>
            </el-col>
          </div>
        </div>
      </div>
      <div class="invite-content invite-page">
        <div class="invite-page-center">
          <div class="invite-talents-job">
            <div class="invite-title">人才求职服务</div>
            <div class="invite-title-line"></div>
            <div class="invite-talents-content">
              <el-row class="talents-content-row">
                <div class="talents-list">
                  <div>
                    <img src="../assets/img/index/jianli.png" height="80px" alt>
                    简历撰写
                  </div>
                </div>
                <div class="talents-list">
                  <div>
                    <img src="../assets/img/index/shipei.png" height="80px" alt>
                    适配分析
                  </div>
                </div>
                <div class="talents-list">
                  <div>
                    <img src="../assets/img/index/mianshi.png" height="74px" alt>
                    面试辅导
                  </div>
                </div>
              </el-row>
              <el-row class="talents-content-row" style="margin:30px 0 0 0;">
                <div class="talents-list">
                  <div>
                    <img src="../assets/img/index/tanxin.png" height="77px" alt>
                    谈薪辅导
                  </div>
                </div>

                <div class="talents-list">
                  <div>
                    <img src="../assets/img/index/offer.png" height="80px" alt>
                    offer选择
                  </div>
                </div>
                <div class="talents-list">
                  <div>
                    <img src="../assets/img/index/zijian.png" height="71px" alt>
                    自荐奖金
                  </div>
                </div>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <div class="invite-employer-business">
        <div class="invite-employer-business-center">
          <div class="invite-title">企业雇主服务</div>
          <div class="invite-title-line"></div>
          <div class="invite-talents-content">
            <el-row class="talents-content-row">
              <div class="talents-list">
                <div>
                  <img src="../assets/img/index/yusuan.png" height="80px" alt>
                  招聘预算方案咨询
                </div>
              </div>

              <div class="talents-list">
                <div>
                  <img src="../assets/img/index/zhineng.png" height="90px" alt>
                  智能职位发布系统
                </div>
              </div>
              <div class="talents-list">
                <div>
                  <img src="../assets/img/index/pingtai.png" height="80px" alt>
                  平台专属顾问服务
                </div>
              </div>
            </el-row>
            <el-row class="talents-content-row" style="margin:30px 0 0 0;">
              <div class="talents-list">
                <div>
                  <img src="../assets/img/index/liucheng.png" height="76px" alt>
                  HR流程管理系统
                </div>
              </div>

              <div class="talents-list">
                <div>
                  <img src="../assets/img/index/beidiao.png" height="80px" alt>
                  注册人才背调服务
                </div>
              </div>
              <div class="talents-list">
                <div>
                  <img src="../assets/img/index/jingzhun.png" height="88px" alt>
                  雇主品牌精准曝光
                </div>
              </div>
            </el-row>
          </div>
        </div>
      </div>

      <div class="invite-famous-enterprise">
        <div class="invite-title">入驻行业名企</div>
        <div class="invite-title-line"></div>
        <div class="invite-famouse-enterprise">
          <el-row class="famouse-enterprise-row">
            <div v-for="(t,i) in companies" :key="i" class="famouse-list">
              <img :src="t.image" height="100%" width="98%" alt>
            </div>
          </el-row>
        </div>
      </div>

      <div class="invite-footer invite-page">
        <div class="invite-page-center">
          <el-row>
            <el-col :span="7">
              <div class="footer-text">
                <div class="footer-title">注册工程师人才</div>
                <div>{{conactOur.phone}}（工作时间：{{conactOur.workTime}}）</div>
                <div>企业服务邮箱：{{conactOur.comEmail}}</div>
                <div>{{conactOur.comAddrees}}</div>
              </div>
            </el-col>
            <el-col :span="5" class="footer-text-center">
              <div class="footer-text">
                <div class="footer-title">关于我们</div>
                <div class="link" @click="clickAboutOur(item)" v-for="item in abourtOur">{{item.title}}</div>
              </div>
            </el-col>
            <el-col :span="6" class="footer-text-center">
              <div class="footer-text">
                <div class="footer-title">帮助中心</div>
                <div class="link" @click="clickHelpCenter(item)" v-for="item in helpCenter">{{item.title}}</div>
              </div>
            </el-col>
            <el-col :span="6" class="footer-img">
              <div class="footer-img-list">
                <img :src="conactOur.codeImage1" alt>
                <div>{{conactOur.codeName1}}</div>
              </div>

              <div class="footer-img-list" style="position: relative;left: 15px">
                <img :src="conactOur.codeImage2" alt>
                <div>{{conactOur.codeName2}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="footer-link">
            <span>友情链接：</span>
            <a v-for="(t,i) in links" :key="i" :href="t.url" target="_Blank" style="margin-left: 15px">{{t.name}}</a>
          </el-row>
        </div>
      </div>
      <el-row class="footer-versions">
        <div>&copy;2019 注册工程师人才网鄂ICP备12010182号-8</div>
        <a style="display:flex;align-items:center;margin-left:30px;text-decoration: none;color:#A9A9A9"
           href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42018502003914">
          <img src="@/assets/img/index/beian.png" alt>
          <span>鄂公网安备 42018502003914号</span>
        </a>
        <div style="display: flex;align-items: center;margin-left:30px;">
          <img src="../assets/img/index/buliang.png" alt>
          <span>违法和不良信息举报电话：027-65022400&nbsp;邮箱：gcs360@zddhr.com</span>
        </div>
      </el-row>
    </div> -->
    <el-dialog :visible.sync="dialogVisible" class="home-dialog">
      <div class="home-card">
        <div class="home-card-title" >找工作</div>
        <div>人证合一，自荐入职拿奖金</div>
        <div>
          <img src="../assets/img/index/zhaogongzuo.jpg" height="171px" alt>
        </div>
        <div>
          <el-button @click="doTalents">去找工作</el-button>
        </div>
      </div>
      <div class="home-card home-card-right">
        <div class="home-card-title">找人才</div>
        <div>快速匹配，安全省心有保障</div>
        <div>
          <img src="../assets/img/index/zhaorencai.jpg" height="171px" alt>
        </div>
        <div>
          <el-button @click="doCompany">去发布职位</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import _subject from '../assets/utils/subject'
import * as _ from 'underscore'
export default {
  data() {
    return {
      data: {
        AboutOurList: [],
        HelpCenterList: [],
        links: [],
        conactOur: {}
      },
      banners: [],
      companies: [],
      links: [],
      conactOur: {},
      abourtOur: [],
      helpCenter: [],
      dialogVisible: false,
      index: 0
    }
  },
  methods: {
    clickHelpCenter(t) {
      this.$router.push({ path: t.to })
    },
    clickAboutOur(t) {
      this.$router.push({ path: t.to })
    },
    doTalents() {
      if (this.index == 1) {
        window.location.href = 'http://talent.gcs360.com/login'
      } else if (this.index == 2) {
        window.location.href = 'http://talent.gcs360.com/register'
      }
    },
    doCompany() {
      if (this.index == 1) {
        window.location.href = 'http://company.gcs360.com/login'
      } else if (this.index == 2) {
        window.location.href = 'http://company.gcs360.com/register'
      }
    },
    doLogin(index) {
      this.index = index
      this.dialogVisible = true
    }
  },
  components: {},
  created() {
    let self = this
    _subject.loadStatic('9,44,20,45,46,47', function(o) {
      //首页banner
      self.banners = _.map(o[47], function(t) {
        return JSON.parse(t.content)
      })
      //合作公司
      self.companies = _.map(o[9], function(t) {
        return JSON.parse(t.content)
      })
      //友情链接
      self.links = _.map(o[44], function(t) {
        return JSON.parse(t.content)
      })
      //联系我们
      _.map(o[20], function(t) {
        self.conactOur = JSON.parse(t.content)
      })
      //关于我们
      self.abourtOur = _.map(o[45], function(t) {
        return JSON.parse(t.content)
      })
      //帮助中心
      self.helpCenter = _.map(o[46], function(t) {
        return JSON.parse(t.content)
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.invite-footer {
  .link {
    cursor: pointer;
  }
}
.index-top-banner {
  background: url('../assets/img/index/home-banner.jpg') no-repeat center;
  background-size: cover;
}
.serve-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
}
.serve-safety {
  background: #f7f7f7 url('../assets/img/index/anquan.png') no-repeat center;
  &:hover {
    background: #f09338 url('../assets/img/index/anquan1.png') no-repeat center;
  }
}
.serve-major {
  background: #f7f7f7 url('../assets/img/index/zhuanye.png') no-repeat center;
  &:hover {
    background: #f09338 url('../assets/img/index/zhuanye1.png') no-repeat center;
  }
}
.serve-convenient {
  background: #f7f7f7 url('../assets/img/index/bianjie.png') no-repeat center;
  &:hover {
    background: #f09338 url('../assets/img/index/bianjie1.png') no-repeat center;
  }
}
</style>
